<template>
	<view class="reply">
		<view class="top">
			<comment-item :closeBtn="true" :childState="true" :item="replyItem"></comment-item>
		</view>
		<view class="list">
			<view class="row" v-for="item in childReplyArr">
				<comment-item @removeEnv="commentEnv" :childState="true" :item="item"></comment-item>
			</view>
		</view>
		
		<view >
			<comment-frame @commentEnv="commentEnv" :commentObj="commentObj" :placeholder="`回复：${giveName(this.replyItem)}`" ></comment-frame>
			
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database()
	import {
		giveName,
		giveAvatar
		
	} from '../../utils/tools';
	export default {
		data() {
			return {
				replyItem:null,
				commentObj:{
					article_id:"",
					comment_type:1,
					reply_user_id:"",
					reply_comment_id:""
				},
				childReplyArr:[],
			};
		},onLoad() {
			let replyItem = uni.getStorageSync("replyItem")
			if(!replyItem){
				uni.navigateBack()
			}
			this.replyItem = replyItem || {}
			this.commentObj.article_id = this.replyItem.article_id
			this.commentObj.reply_user_id = this.replyItem.user_id[0]._id
			this.commentObj.reply_comment_id = this.replyItem._id
			this.getComment()
		},onUnload() {
			uni.removeStorageSync("replyItem")
		},methods:{
			giveName,
			giveAvatar,
		
			//评论成功后的回调
			commentEnv(){
				// this.childReplyArr=[];
				this.getComment()
			},
			//获取子集评论列表
			getComment() {
				let commentTemp = db.collection("quanzi_comment").where(`article_id == "${this.replyItem.article_id}" && comment_type==1 && reply_comment_id == "${this.replyItem._id}"`).orderBy("comment_date desc").limit(5).getTemp()
				let userTemp = db.collection("uni-id-users").field("_id,username,nickname,avatar_file").getTemp()
				db.collection(commentTemp,userTemp).orderBy("comment_date desc").limit(5).get().then(res=>{
				
					this.childReplyArr = res.result.data
				})
			}
		}
	}
</script>

<style lang="scss">
.reply{
	.top{
		padding: 30rpx;
		border-bottom: 15rpx solid #eee;
	}
	.list{
		padding: 30rpx 60rpx;
		padding-bottom: 15rpx;
		.row{
			padding-bottom: 15rpx;
		}
	}
}
</style>
